<template>
  <el-dialog ref="el-dialog" :visible.sync="dialogVisible" width="80%" :close-on-click-modal="false" style="padding-bottom: 15vh;" :before-close="close">
    <template slot="title">
      <div class="titleDiv">
        <div class="titleDivOne">{{ isEdit ? '编辑' : '新增' }}视频监控设备</div>
      </div>
    </template>
    <div>
      <el-form ref="RefForm" :model="formData" label-width="80px" :validate-on-rule-change="false" :rules="formRules" status-icon>
        <div class="bigBox">
          <div class="divOne">
            <el-form-item label="设备名称" prop="name">
              <el-input v-model="formData.name" maxlength="10" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="所在区域" prop="areaId">
              <el-select v-model="formData.areaId" style="width: 100%;" placeholder="请选择">
                <el-option v-for="item in region" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="坐标X" prop="x">
              <el-input v-model="formData.x" maxlength="10" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="坐标Y" prop="y">
              <el-input v-model="formData.y" maxlength="10" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="取流地址" prop="url">
              <el-input v-model="formData.url" show-word-limit></el-input>
            </el-form-item>
            <div class="dialog-button">
              <el-button @click="close">取 消</el-button>
              <el-button type="primary" @click="videoPlay = !videoPlay">{{ videoPlay ? '验证坐标' : '验证视频' }}</el-button>
              <el-button :loading="loadingSubmit" type="primary" @click="handleSubmit">确 定</el-button>
            </div>
          </div>
          <videoRtsp v-if="videoPlay" :id="new Date().getTime()" :rtsp="formData.url" width="600" style="margin-left: 20px;"></videoRtsp>
          <div v-show="!videoPlay" id="map" class="divTwo" @click="getCoordinateHandler">
            <div class="divS" :style="{ display: formData.x || formData.y ? 'block' : 'none', left: formData.x + 'px', top: formData.y + 'px' }">
              <img :src="imgUrl" alt="基站" />
            </div>
            <img v-if="mapSwaitch" class="mapImg" :src="imgSrc + mapUrl" alt />
            <img v-else class="mapImg" :src="mapUrl" alt />
          </div>
        </div>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  import { area, tunnel, parameter } from '@/api/api'
  import { assetsImages } from '@/utils/images'
  import videoRtsp from '@/components/VideoRtsp'

  export default {
    components: {
      videoRtsp
    },
    mixins: [dialogEditMixin],
    data() {
      return {
        videoPlay: false,
        imgUrl: '',
        mapUrl: '',
        imgSrc: this.$imgUrl + '/',
        mapSwaitch: true,
        // 地图：单洞
        singleHole: assetsImages.singleHole,
        // 地图：双洞
        doubleHole: assetsImages.doubleHole,
        // 区域
        region: [],
        // 校验规则
        formRules: {
          // 基站名称
          name: [
            { required: true, message: '请输入基站名称', trigger: 'blur' },
            { validator: eleValidator([{ rule: 'isLimit', msg: '长度在2-30个字符之间' }, { rule: 'isEmpty', msg: '基站名称不能为空' }]), trigger: 'blur' },
          ],
          // 区域ID
          areaId: [
            { required: true, message: '请选择区域', trigger: 'change' }
          ],
          // 位置X
          x: [
            { required: true, message: '请输入坐标X', trigger: 'change' },
            { validator: eleValidator([{ rule: 'isNumber', msg: '只能输入数字' }, { rule: 'isEmpty', msg: '位置X不能为空' }]), trigger: 'change' }
          ],
          // 位置Y
          y: [
            { required: true, message: '请输入坐标Y', trigger: 'change' },
            { validator: eleValidator([{ rule: 'isNumber', msg: '只能输入数字' }, { rule: 'isEmpty', msg: '位置Y不能为空' }]), trigger: 'change' }
          ],
          url: [
            { required: true, message: '请输入取流地址', trigger: 'blur' }
          ],
        },
        // API
        apiKey: {
          search: '/Video/',
          add: '/Video',
          put: '/Video/'
        }
      }
    },
    watch: {
      dialogVisible: function (newValue, oldValue) {
        if (newValue) { return }
        this.$refs.RefForm.clearValidate()
      }
    },
    methods: {
      resetFormData() {
        this.formData = {
          // 基站名称
          name: '',
          // 区域  ID
          areaId: '',
          // 位置X
          x: '',
          // 位置Y
          y: '',
          url: '',
        }
      },
      // 请求区域数据
      async getList() {
        try {
          const obj = { pageIndex: 1, pageSize: 1e8 }
          const { data: { items: resData } } = await area('post', obj, false)
          const regionData = resData.map(item => {
            return {
              value: item.id,
              label: item.name
            }
          })
          this.$nextTick(() => {
            this.region = regionData
          })
        } catch (err) {
          console.error('getList err: ', err)
        }
      },
      // 获取隧道示意图
      async getTunnelData() {
        try {
          let obj = { id: 1 }
          let res = await tunnel('get', obj, true)
          if (res.code === 200) {
            if (res.data.useTemplate) {
              if (res.data.templateName === "单洞") {
                this.mapUrl = this.singleHole
              } else if (res.data.templateName === "双洞") {
                this.mapUrl = this.doubleHole
              }
              this.mapSwaitch = false
            } else {
              this.mapSwaitch = true
              this.mapUrl = res.data.backedImageName
            }
          }
        } catch (err) {
          console.log(err)
        }
      },
      // 请求图标
      async getIcon() {
        try {
          let response = await parameter('get', { parameterName: 'MonitorImage' })
          this.imgUrl = response.data.value || assetsImages.camera
        } catch (err) {
          this.imgUrl = assetsImages.camera
          console.log(err)
        }
      },
      getCoordinateHandler(event) {
        let map = document.querySelector('#map')
        let dialog = this.$refs['el-dialog']
        // 获取鼠标在浏览器中的位置
        let mousex = event.clientX
        let mousey = event.clientY
        // 获取盒子位置
        let elementx = map.offsetLeft + dialog.$refs.dialog.offsetLeft
        let elementy = map.offsetTop + dialog.$refs.dialog.offsetTop - dialog.$el.scrollTop
        // 获取鼠标在盒子中的位置
        this.formData.x = (mousex - elementx)
        this.formData.y = (mousey - elementy)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-form-item__content {
    label {
      display: flex;
      .el-input {
        flex: 1;
      }
    }
  }
  .titleDiv {
    overflow: hidden;
    .titleDivOne {
      float: left;
    }
    .titleDivTwo {
      float: right;
      height: 20px;
      width: 20px;
      overflow: hidden;
      margin-right: 50px;
      border: 1px solid lime;
      img {
        height: 100%;
        width: 100%;
        float: left;
      }
    }
  }
  .bigBox {
    display: flex;
    .divOne {
      flex: 1;
      .el-input {
        min-width: 170px;
      }
      .dialog-button {
        width: 100%;
        text-align: center;
      }
    }
    .divTwo {
      min-width: 830px;
      min-height: 617px;
      margin-left: 20px;
      border: 1px solid #ccc;
      position: relative;
      background-color: #ccc;
      .mapImg {
        width: 100%;
        height: 100%;
      }
      .divS {
        width: 20px;
        height: 20px;
        display: none;
        position: absolute;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        img {
          width: 100%;
          height: 100%;
          float: left;
        }
      }
    }
  }
</style>
